<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="status_bar"></view>
		<view class="flex align-center justify-center" style="height: 50rpx">
			<view v-for="(item, index) in list" :key="index" class="mx-1" :class="clickIndex === index ? 'text-main font' : ''" @click="ChangeIndex(index)">
				{{ item }}
			</view>
		</view>
		<!-- 滑动区域 -->
		<swiper :current="clickIndex" :style="{ height: height + 'px' }" @change="swiperchange">
			<!-- 滚动区域 -->
			<!-- 关注 -->
			<swiper-item>
				<view>
					<scroll-view scroll-y :style="{ height: height + 'px' }" @scrolltolower="loadmoreEven(1)">
						<template v-if="concernList.length > 0">
							<block v-for="(item, index) in concernList" :key="index">
								<list :item="item" :index="index" @dosupport="dosupportEven" :isDetail="true" :userId="userId" :isSpace="true"></list>
								<divider></divider>
							</block>
						</template>
						<!-- 上拉加载更多 -->
						<template v-if="concernList.length > 9">
							<loadmore :loadmore="loadmore"></loadmore>
						</template>
						<template v-else>
							<noThing></noThing>
						</template>
					</scroll-view>
				</view>
			</swiper-item>

			<!-- 话题 -->
			<swiper-item>
				<view>
					<scroll-view scroll-y :style="{ height: height + 'px' }">
						<!-- 热门分类 -->
						<hotCate :list="cateList"></hotCate>
						<!-- 搜索框 -->
						<view
							class="flex align-center justify-center"
							style="height: 90rpx; color: rgba(0, 0, 0, 0.3); width: 700rpx; margin: 20rpx auto; background-color: #f5f5f2"
							@click="tosearch"
						>
							<text class="iconfont icon-sousuo"></text>
							搜索话题
						</view>
						<!-- 轮播图 -->
						<swiper :autoplay="true" :interval="3000" :duration="1000" class="mb-2" :circular="true">
							<swiper-item v-for="(item, index) in imageList">
								<view style="width: 700rpx; height: 300rpx" class="m-auto" :key="index">
									<image :src="item.src" style="width: 700rpx" class="rounded" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper>
						<divider></divider>
						<!-- 标题列表 -->
						<block v-for="(item, index) in topicList" :key="index">
							<topicList :item="item" :index="index"></topicList>
						</block>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import list from '../../compoment/IndexCommen/list.vue';
import hotCate from '../../compoment/news/hot-cate.vue';
import topicList from '../../compoment/news/topicList.vue';
import { getTopicList, getImageList, getcateList, getConcernPost } from '../../request/Api/news.js';
let current = 1;
export default {
	data() {
		return {
			height: 500,
			clickIndex: 0,
			concernList: [],
			list: ['关注', '话题'],
			loadmore: '上拉加载更多',
			imageList: [],
			cateList: [],
			topicList: [],
			page: 1,
			userId: 0
		};
	},
	components: {
		list,
		hotCate,
		topicList
	},
	onLoad() {
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			this.userId = userInfo.id;
		}
		uni.getSystemInfo({
			success: (res) => {
				this.height = res.windowHeight - uni.upx2px(50) - res.statusBarHeight;
			}
		});
		this.getTopicList();
		this.getImageList();
		this.getcateList();
		uni.$on('followOrdosupport', (res) => {
			if (res.type === 'follow') {
				this.concernList.forEach((item) => {
					if (item.userId === parseInt(res.userId)) {
						item.isFollow = res.num;
					}
				});
			}
			if (res.type === 'dosupport') {
				this.dosupport({ num: res.num, id: res.id });
			}
		});
	},
	onShow() {
		this.loadmore = '上拉加载更多';
		this.page = 1;
		this.getconcernList();
	},
	methods: {
		loadmoreEven(index) {
			this.getconcernList();
		},

		getconcernList() {
			if (this.loadmore !== '上拉加载更多') return;
			this.loadmore = '加载中';
			getConcernPost({ current: this.page }).then((res) => {
				console.log(res.data);
				const list = res.data.map((v) => {
					return {
						id: v.id,
						userId: v.userId,
						userpic: v.user.userpic,
						nikeName: v.user.nikeName,
						createTime: v.createTime,
						isFollow: v.isFollow,
						title: v.title,
						titlepic: v.titlepic,
						supportVo: v.supportVo,
						commentCount: v.commentCount,
						sharenum: v.sharenum
					};
				});
				this.concernList = [...this.concernList, ...list];
				if (res.data.length < 10) {
					this.loadmore = '没有更多数据了';
				} else {
					this.page++;
					this.loadmore = '上拉加载更多';
				}
			});
		},
		dosupport(e) {
			let item = '';
			this.concernList.forEach((v) => {
				if (v.id === e.id) {
					item = v;
				}
			});

			let msg = e.num === 1 ? '顶' : '踩';
			if (item.supportVo.userSupportType === e.num) {
				uni.showToast({
					title: '你已经' + msg + '过了',
					mask: true
				});
				return;
			}
			// 如果没有顶踩过，就直接++
			if (item.supportVo.userSupportType === null) {
				if (e.num === 1) {
					item.supportVo.support++;
				} else {
					item.supportVo.unSupportCount++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.supportVo.userSupportType === 1 && e.num === 0) {
				item.supportVo.support--;
				item.supportVo.unSupportCount++;
			}
			//如果踩过，现在要顶
			else if (item.supportVo.userSupportType === 0 && e.num === 1) {
				item.supportVo.support++;
				item.supportVo.unSupportCount--;
			}
			item.supportVo.userSupportType = e.num;
			uni.showToast({
				title: msg,
				mask: true
			});
		},
		getTopicList() {
			getTopicList({ current: 1 }).then((res) => {
				this.topicList = res.data.map((item) => {
					return {
						id: item.id,
						type: item.type,
						topicClassId: item.topicClassId,
						titlepic: item.titlepic,
						title: item.title,
						description: item.description,
						dynamic: item.postCount,
						todayPostCount: item.todayPostCount
					};
				});
			});
		},
		getImageList() {
			getImageList({ type: 0 }).then((res) => {
				this.imageList = res.data;
			});
		},
		getcateList() {
			getcateList().then((res) => {
				this.cateList = res.data;
			});
		},
		dosupportEven(e) {
			let item = e.item;
			let msg = e.type === 'support' ? '顶' : '踩';
			// 如果没有顶踩过，就直接++
			if (item.support.type === '') {
				if (e.type === 'support') {
					item.support.support_count++;
				} else {
					item.support.unsupport_count++;
				}
			}
			//如果顶过，现在又是踩
			else if (item.support.type === 'support' && e.type === 'unsupport') {
				item.support.support_count--;
				item.support.unsupport_count++;
			}
			//如果踩过，现在要顶
			else if (item.support.type === 'unsupport' && e.type === 'support') {
				item.support.support_count++;
				item.support.unsupport_count--;
			}
			item.support.type = e.type;
			uni.showToast({
				title: msg,
				mask: true
			});
		},
		tosearch() {
			uni.navigateTo({
				url: '/pages/search/search?type=话题'
			});
		},
		ChangeIndex(index) {
			this.clickIndex = index;
		},
		//滑动下面的页面相应改变导航栏
		swiperchange(e) {
			this.clickIndex = e.detail.current;
		}
	}
};
</script>

<style></style>
